<template>
  <div>
    <Header :title="headerTitle"></Header>
    <div class="cart_item_body">
      <!-- 购物车商品列表 -->
      <van-row v-for="(item,index) in cart" :key="index" style="margin: 10px 0px;">
        <!-- 复选框 -->
        <van-col span="2" style="display: flex;justify-content: center;margin-top: 10px;">
          <input type="checkbox" :checked="item.checked" @click="radio(item)" />
        </van-col>

        <!-- 商品卡片 -->
        <van-col span="21">
          <van-card :price="item.salePrice" :title="item.productName" :thumb="item.productImage">
            <template #num>
              <van-stepper v-model="item.num" integer @plus="addition(item)" @minus="reduce(item)" />
            </template>
          </van-card>
        </van-col>

        <!-- 删除按钮 -->
        <van-col span="1" style="display: flex;justify-content: center;margin-top: 10px;">
          <van-icon name="delete" color="red" />
        </van-col>
      </van-row>

      <!-- 底部提交订单区域 -->
      <van-submit-bar :price="allPrice" button-text="提交订单" @submit="onSubmit">
        <input type="checkbox" :checked="allChecked" @click="all_Checked" />全选
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  data() {
    return {};
  },
  components: {
    Header
  },
  computed: {
    cart: function() {
      return this.$store.state.cart;
    },
    headerTitle() {
      return `购物车(${this.cart.length})`;
    },
    allChecked: function() {
      return this.$store.state.allChecked;
    },
    allPrice: function() {
      return this.$store.state.allPrice;
    }
  },
  methods: {
    onSubmit() {
      //提交按钮
      console.log("提交事件触发！");
    },
    radio(item) {
      //单选按钮
      this.$store.dispatch("cart_Radio", {
        id: item.productId,
        checked: event.target.checked
      });
    },
    all_Checked() {
      //全选
      this.$store.dispatch("all_Checked", event.target.checked);
    },
    addition(item) {
      //增加数量
      this.$store.dispatch("add_Ition", item);
    },
    reduce(item) {
      //减少数据
      this.$store.dispatch("Reduce", item);
    }
  }
};
</script>

<style>
.cart_item_body {
  margin-top: 40px;
}
</style>